<template>
  <view class="login">
    <!-- 顶部标题 -->
    <view class="login__header">
      <img
          class="login__header__logo"
          src="@/static/images/login__png/logo.png"
          alt=""
      />
      <view class="login__header__title">欢迎使用帮帮推</view>
    </view>
    <!-- 表单 -->
    <view class="login__center">
      <view class="login__center__form">
        <view class="login__center__form__top">
          <text class="iconfont icon-phone"></text>
          <view class="login__center__form__top--label">用户名</view>
        </view>
        <view class="login__center__form__bottom">
          <nut-input
              v-model="condition.loginName"
              placeholder="请输入手机号"
              clearable
              type="number"
              style="padding-left: 0; padding-right: 0"
          ></nut-input>
        </view>
      </view>
      <view class="login__center__form">
        <view class="login__center__form__top">
          <text class="iconfont icon-verify"></text>
          <view class="login__center__form__top--label">验证码</view>
        </view>
        <view class="login__center__form__bottom">
          <nut-input
              type="code"
              v-model="condition.code"
              placeholder="请输入验证码"
              style="padding-left: 0; padding-right: 0"
          >
            <template #right>
              <view
                  class="login__center__form__bottom&#45;&#45;slot"
                  @click="getVerificationCode()"
              >获取验证码
              </view>
            </template>
          </nut-input>
        </view>
      </view>
      <view class="login__center__but">
        <nut-button
            type="primary"
            shape="square"
            :loading="loading"
            block
            custom-color="#1FAB62"
            @click="handleLogin()"
        >登录
        </nut-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import toast from "@/utils/Toast";
import BaseService from "@/api/BaseService";
import CacheUtils from "@/utils/CacheUtils";
import {ref, reactive} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {validMobile} from "@/utils/validator";
import {userStore} from "@/stores/user";

const userInfoStore = userStore();

// 获取到从页面跳转过来的参数
onLoad(({openId}) => {
  if (openId) {
    user.openid = openId;
  }
  if (CacheUtils.getCache("inviteId")) {
    user.inviteId = CacheUtils.getCache("inviteId");
  }
});

// 登录表单数据
const condition = reactive({loginName: "", code: ""});
const user = reactive({openid: "", mobile: "", mobileCode: "", inviteId: ""});
//加载开关
const loading = ref(false);

// 获取验证码
const getVerificationCode = async () => {
  if (!condition.loginName) {
    toast.error("请输入手机号");
    return;
  }
  if (!validMobile(condition.loginName)) {
    toast.info("请输入正确的手机号");
    return;
  }
  try {
    // await BaseService.getVerificationCode(condition.loginName);
    // todo  需要删除掉
    condition.code = await BaseService.getVerificationCode(condition.loginName);
  } catch (err) {
    toast.info(err);
  }
};

//登录提交
const handleLogin = async () => {
  if (!condition.loginName) {
    toast.info("请输入手机号");
    return;
  }
  if (!condition.code) {
    toast.info("请输入密码");
    return;
  }
  try {
    loading.value = true;
    Object.assign(user, {
      mobile: condition.loginName,
      mobileCode: condition.code,
    });
    const data = await BaseService.getLogin(user);
    CacheUtils.setCache("token", data.token);
    toast.info("登录成功!");
    await userInfoStore.userInfoInit(data);
    setTimeout(() => {
      uni.reLaunch({
        url: "/pages/index/index",
      });
    }, 1500);
    loading.value = false;
  } catch (err) {
    loading.value = false;
    toast.info(err);
  }
};
</script>

<style lang="scss" scoped>
.login {
  height: 100vh;
  box-sizing: border-box;
  position: relative;

  &__header {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%, -50%);

    &__logo {
      width: 200rpx;
      height: 200rpx;
    }

    &__title {
      width: 196rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 28rpx;
      color: #181818;
      text-align: center;
    }
  }

  &__center {
    width: 630rpx;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -66%);

    &__form {
      margin-top: 40rpx;
      border-bottom: 2rpx solid rgba(228, 230, 232, 0.6);

      &__top {
        display: flex;
        align-items: center;

        .iconfont {
          color: #1fab62;
          font-size: 48rpx;
        }

        &--label {
          margin-left: 20rpx;
          font-size: 28rpx;
          color: #181818;
        }
      }

      &__bottom {
        flex: 1;

        &--slot {
          width: 140rpx;
          height: 40rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #1fab62;
          line-height: 33rpx;
        }
      }
    }

    &__but {
      margin-top: 80rpx;
      width: 630rpx;
    }
  }
}
</style>
